import styles from './index.module.scss'
import { NavBar, Form, Input, List, Button, Toast } from 'antd-mobile'
import { useHistory, useLocation } from 'react-router'
import { LoginForm } from '@/types/data'
import { useDispatch } from 'react-redux'
import { getCode, login } from '@/store/actions/login'
import { useEffect, useRef, useState } from 'react'
import { FormInstance } from 'antd-mobile/es/components/form'
import { InputRef } from 'antd-mobile/es/components/input'
// import Icon from '@/components/Icon'
// import { AxiosError } from 'axios'

// console.log(styles)

export default function Login() {
  const history = useHistory()
  const dispatch = useDispatch()
  const location = useLocation<{ from: string }>()
  console.log('location', location)

  const handleLogin = async (values: LoginForm) => {
    // 提交表单且数据验证成功后触发
    // values 就是收集到的表单数据！！
    // console.log(values)

    // try {
    // const action = login(values) // login() 他的返回值才是异步action函数
    await dispatch(login(values))

    // 希望1.登录成功后 2.给提示 3.跳转首页
    Toast.show({
      duration: 1000, // 提示时长
      // icon: <Icon name="iconbtn_like_sel"></Icon>,
      icon: 'success', // 图标
      content: '登录成功', // 提示文案
      afterClose: () => {
        // 提示完成后要做的事（提示完全关闭后执行）
        // console.log('提示关闭了')
        if (location.state) {
          // 被迫来的， 有回跳地址的 将来登录完成后需要跳回去
          history.replace(location.state.from)
        } else {
          // 主动来的  登录完直接去首页
          history.push('/home')
        }
      },
    })
    // Toast.show('登录成功')
    // } catch (e) {
    //   // AxiosError axios内置的错误类型 =》 临时方案
    //   const error = e as AxiosError<ApiRes>

    //   console.log(error.response?.data.message, 99)

    //   Toast.show({
    //     icon: 'fail',
    //     content: error.response?.data.message,
    //   })
    // }
  }

  // 1.创建Form组件的ref
  // FormInstance Form组件的类型
  const formRef = useRef<FormInstance>(null)

  // 2.经 Form.useForm() 创建的 form 控制实例
  const [form] = Form.useForm()

  // 这边存的是Input组件
  const inputRef = useRef<InputRef>(null)

  // 定义一个倒计时的秒数
  const [seconds, setSeconds] = useState(0)

  // 创建ref 存储定时器id
  const timer = useRef(-1)

  // 发送验证码的逻辑
  const sendCode = async () => {
    if (seconds > 0) return

    // console.log(111)
    // 真正请求接口 给手机号发送验证码之前： 1.获取输入的手机号 2.必须有手机号且格式正确才能请求接口
    // const mobile = formRef.current!.getFieldValue('mobile')
    const mobile = form.getFieldValue('mobile')

    const errors = form.getFieldError('mobile')

    // console.log(mobile, errors)
    if (errors.length > 0) {
      // 有问题的
      inputRef.current!.focus()
      return
    }

    // console.log('请求接口 发送验证码了。。。')

    // 封装一个getCode的函数 返回一个请求的异步action
    await dispatch(getCode(mobile))

    // 倒计时
    // 1.初始化倒计时的秒数
    setSeconds(60)
    // 2.开启定时器
    timer.current = window.setInterval(() => {
      // 这边我们希望获取到上一次的状态 -1； 但是实际上拿到的是默认的 0   -1
      // this.setState(() => {}) 适用于要依赖上一次的状态进行修改！！
      // setSeconds(seconds - 1)
      // setSeconds((state) => {
      //   // state 就是上一次的状态
      //   return state - 1
      // })
      // console.log(111)
      setSeconds((state) => state - 1)
    }, 1000)
  }

  // 需求: 在seconds到0时 清除定时器
  useEffect(() => {
    if (seconds <= 0) {
      clearInterval(timer.current)
    }
  }, [seconds])

  // 需求： 离开这个页面 清除定时器
  useEffect(() => {
    return () => {
      clearInterval(timer.current)
    }
  }, [])

  return (
    <>
      <div className={styles.root}>
        <NavBar onBack={() => history.go(-1)}></NavBar>

        <div className="login-form">
          <h2 className="title">登录</h2>

          {/* 

            Form.Item属性介绍
                1.validateTrigger 设置触发时机 是个数组 
                2.rules 设置规则的  是个数组
                3.name 设置通过哪个字段收集信息的
          */}
          <Form form={form} onFinish={handleLogin} ref={formRef}>
            <Form.Item
              validateTrigger={['onChange', 'onBlur']}
              rules={[
                { required: true, message: '手机号不能为空' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号格式有问题！！' },
              ]}
              name="mobile"
              className="login-item"
            >
              <Input placeholder="请输入手机号" ref={inputRef}></Input>
            </Form.Item>

            <List.Item
              className="login-code-extra"
              extra={
                <span className="code-extra" onClick={sendCode}>
                  {seconds === 0 ? '发送验证码' : `${seconds}s后重新获取`}
                </span>
              }
            >
              <Form.Item
                name="code"
                validateTrigger={['onChange', 'onBlur']}
                rules={[
                  { required: true, message: '验证码不能为空！！' },
                  { pattern: /^\d{6}$/, message: '验证码格式有问题！！' },
                ]}
                className="login-item"
              >
                <Input placeholder="请输入验证码"></Input>
              </Form.Item>
            </List.Item>

            <Form.Item>
              {/* Button 组件一旦加上 type="submit" 开启点击按钮整体校验 */}
              <Button
                type="submit"
                color="primary"
                className="login-submit"
                block
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>

      {/* <div className={styles.test}>
        哈哈哈哈
        <div className="hhh">我是嘻嘻嘻i</div>
        <div className="xxx">我是随便随便</div>
      </div> */}
    </>
  )
}
